<template>
  <div style="height: 100vh; background-color: #f4f6f8; width: 100vw;">
    <header style=" background-color: white; padding: 20px;  height: 30px; display: flex; justify-content: space-between;align-items: center; ">
        <el-page-header :content="'查看企业'" @back="$router.back()"></el-page-header>
            <div>管理员</div>
    </header> 
    <main>
        <div>
            <!-- 企业信息 -->
            <div style="padding: 20px; height: 300px; background-color: white; margin: 20px 130px;">
                <div>企业信息</div>
                <div style="margin: 20px 20px 20px 150px;" >
                    <div style="display: flex;width: 50%;margin-bottom:20px; justify-content: space-between;">
                        <text>企业名称：{{ detail.name }}</text>
                        <text> 法人：{{ detail.legalPerson }}</text>
                    </div>
                    <div style="display: flex;width: 50%;  margin-bottom:20px; justify-content: space-between;">
                        <text>注册地址：{{ detail.registeredAddress }}</text>
                        <text> 所在行业：{{ detail.industryName }}</text>
                    </div>
                      <div style="display: flex;width: 50%; ">
                        <text>营业执照：</text>
                            <img :src="detail.businessLicenseUrl"
                            style="width: 220px;"
                            >
                    </div>
                </div>
            </div>
            <!-- 联系人信息 -->
             <div style="height: 120px; margin: 20px 130px; background-color: white; padding: 20px;
             ">
                <text>联系人信息</text>
                <div style="width: 46%; margin: 30px 20px 20px 130px; display: flex;justify-content: space-between;">
                    <text>企业联系人：{{ detail.contact }}</text>
                    <text>联系电话：{{ detail.contactNumber }}</text>
                </div>
             </div>
             <!-- 租赁记录  -->
              <div style="margin: 20px 130px; padding: 20px;background-color: white;">
                <div style="margin-bottom: 20px;">租赁记录</div>
                <el-table :header-cell-style="{ background: '#f4f6f8' }" :data="detail.rent" >
                    <el-table-column :border="true" type="index" label="序号" width="120px"></el-table-column>
                    <el-table-column  label="租赁楼宇" width="240px">
                            <template #default="scope">
                            {{ scope.row.name }}
                        </template>
                    </el-table-column>
                    <el-table-column  label="合同状态" width="160px">
                        <template #default="scope">
                   <el-tag  v-if="scope.row.status === 0 " color="#e8f7ff" type="primary">待生效</el-tag>
                   <el-tag  v-if="scope.row.status === 1 " type="success">生效中</el-tag>
                   <el-tag  v-if="scope.row.status === 2 " type="info">已到期</el-tag>
                   <el-tag  v-if="scope.row.status === 3 " type="danger">已退租</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column  label="租赁起止时间" width="280px">
                        <template #default="scope" >
                            {{ scope.row.startTime }} 至 {{ scope.row.endTime }}
                         </template>
                    </el-table-column>
                    <el-table-column  label="租赁合同" width="220px">
                        <template  v-slot="{row}">
                            <!-- target="_blank" 新建标签页进行预览 -->
                             <el-button type="primary" link>
                        <a class="link" :href="getPreviewUrl(row.contractUrl)" target="_blank">
                               {{ row.contractName }}
                        </a>
                             </el-button>
                        </template>
                    </el-table-column>
                    <el-table-column  label="录入时间" width="200px">
                            <template #default="scope">
                            {{ scope.row.createTime }}
                        </template>
                    </el-table-column>
                    <el-table-column  label="操作" width="180px">
                            <template #default="scope">
                    <el-button type="text" @click="downloadFile(scope.row)">合同下载</el-button>
                        </template>
                    </el-table-column>
                </el-table>
              </div>
        </div>
    </main>   
  </div>
</template>

<script setup lang='ts'>
import {downloadFileAPI, getEnterpriseDetailAPI } from '@/apis/park';
import type { EnterpriseDetail, Rent } from '@/types/park';
import { ref} from 'vue'
import { useRoute } from 'vue-router';

// 获取理由信息
const route = useRoute()
// 企业详情 (空对象可以使用as 指定类型)
const detail = ref<EnterpriseDetail>({} as EnterpriseDetail)
 
// 获取企业详情
const getEnterpriseDetail = async() =>{
    const res = await getEnterpriseDetailAPI(route.params.id as string)
    console.log('获取企业详情',res)
    detail.value = res.data
}

getEnterpriseDetail()

// 
const getPreviewUrl = (url:string) =>{
    // 从链接中提取文件扩展名
    const extName = url.split('.').pop()
    // 如果是pdf，可以直接预览
    if(extName === 'pdf' || extName === 'jpg' || extName === 'jpeg'){
        return url
    }  
    // 如果是 doc 或者 docx 可以直接通过微软提供的在线预览服务进行预览
    else if (extName === 'doc' || extName === 'docx'){
        // 微软提供的在线预览服务
        const previewURL = "https://view.officeapps.live.com/op/view.aspx?src=";
        // 返回拼接后的链接，encodeURIComponent 用于转换特殊字符串
        return previewURL + encodeURIComponent(url)
    }
}

// 下载文件
const downloadFile = async (row:Rent)=>{

    console.error('row:', row.contractId); // 调试：打印row数据

    // 根据附件id 下载文件，返回二进制的blob数据
    const res = await downloadFileAPI(row.contractId)
    // 调试：检查响应数据类型
    console.log('响应数据类型:', res );
    // 浏览器下载使用a标签
    const aElement = document.createElement("a");
    // 把 blob 数据转换成 url链接，（类似鸿蒙的沙箱路径）
    aElement.href = URL.createObjectURL(res)
    // 设置download 属性为下载后的合同文件名
    aElement.download = row.contractName
    // 点击下载
    aElement.click()
    // 释放内存
    URL.revokeObjectURL(aElement.href);
    aElement.remove();

}
</script>
<style lang='scss' scoped>
/* 针对 .link 类的样式 */
.link {
  text-decoration: none; /* 取消下划线 */
  color: #81b2d5; /* 自定义初始颜色（例如深灰色），可根据需求修改 */
}

/* 可选：添加 hover 效果（鼠标悬停时的样式） */
.link:hover {
  text-decoration: none;
  color: #007bff; /* 悬停时变色，模拟链接交互感 */
}
</style>